<template>
  <div>
    <van-checkbox  v-for="(item, index) in shopList" :key="item.id" @change="changeItem" v-model="item.check">
      <van-card
        :num="item.count"
        :price="item.price.toFixed(2)"
        desc="描述信息"
        :title="item.title"
        :thumb="item.img"
      >
        <template #footer>
          <!-- 时间修饰符 -->
          <van-button @click.stop="delCarItem(item, index)" type="info" size="mini"
            >－</van-button
          >
          <van-button @click.stop="addCarItem({ index })" type="info" size="mini"
            >＋</van-button
          >
        </template>
      </van-card>
    </van-checkbox>

    <!-- 全选 -->
   <div class="box">
      <van-checkbox @input="changeAllCheck" v-model="checked">全选</van-checkbox>
   </div>

    <!-- 提交 -->
    <van-submit-bar
      v-show="allPrice > 0"
      disabled
      :price="allPrice * 100"
      button-text="提交订单"
      tip="你的收货地址不支持同城送, 我们已为你推荐快递"
      tip-icon="info-o"
    />
  </div>
</template>

<script>
import { mapState, mapMutations, mapGetters } from "vuex";
export default {
  data() {
    return {
      checked: true
    }
  },
  computed: {
    ...mapState({
      shopList: (state) => state.Car.shopList,
    }),
    ...mapGetters({
      allPrice: "Car/allPrice",
    }),
  },
  methods: {
    // 反选
    changeItem() {
      this.checked = this.shopList.every(item => item.check === true )
    },
    // 全选按钮
    changeAllCheck() {
      this.changeItemCheck({ check: this.checked })
    },
    // 商品减少
    delCarItem(item, index) {
      if (item.count <= 1) {
        this.$dialog
          .confirm({
            title: "标题",
            message: "确定要删除--" + item.title,
          })
          .then(() => {
            // on confirm
            this.remCarItem({ index, rem: true });
            this.$toast.success("删除成功");
          })
          // 取消删除
          .catch(() => {
            this.$toast("取消删除");
          });
      } else {
        this.remCarItem({ index, rem: false });
      }
    },
    ...mapMutations({
      addCarItem: "Car/addCarItem",
      remCarItem: "Car/remCarItem",
      changeItemCheck: "Car/changeItemCheck"
    }),
  },
};
</script>

<style>
.van-submit-bar {
  bottom: 50px !important;
}
.box {
  position: fixed;
  bottom: 140px;
}
</style>